<!-- 机械详情 -->
<template>
  <div class="MechanicsItemInfo" @click="hidePanel">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="headerContainer">
      <div>当前位置：</div>
      <div>
        <el-breadcrumb separator="/" class="headerContainerName">
          <el-breadcrumb-item :to="{ path: '/homePc' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><router-link
              :to="{ name: 'MechanicsInfoData', query: { currentIndex: 2 } }"
              >机械中心</router-link
            ></el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ machineList.type }}</el-breadcrumb-item>
          <el-breadcrumb-item class="colorStyle">{{
            machineList.machine_name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="container">
      <div class="titleBox">
        <div class="leftImgBox">
          <swiper
            class="swiper gallery-top"
            :key="swiperOptionTopKey"
            :options="swiperOptionTop"
            ref="swiperOptionTop"
          >
            <swiper-slide
              v-for="(item, index) of machineList.jxzp"
              :key="index"
            >
              <div class="leftImgBoximgWidth">
                <vue-photo-zoom-pro
                  :url="item"
                  :scale="2.5"
                  :width="200"
                  class="leftImgBoximg"
                >
                </vue-photo-zoom-pro>
              </div>
            </swiper-slide>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div> -->
          </swiper>
          <swiper
            class="swiper gallery-thumbs"
            :key="swiperOptionThumbsKey"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              v-for="(items, index) of machineList.jxzp"
              :key="index"
            >
              <img :src="items" class="leftImgBoximgTwo" />
            </swiper-slide>
          </swiper>
        </div>
        <!-- 右侧内容 -->
        <div class="rightBox">
          <div class="rightBoxWarp">
            <div class="rightTitleName">{{ machineList.machine_name }}</div>
            <div
              id="iconRightz"
              class="shareIconBox"
              :data-clipboard-text="dataClipboardText"
              @click="onShowz()"
            >
              <img
                src="./../../../../../public/img/eenginering/shareIcon.png"
                class="shareIcon"
              />
              <span class="shareIconName">分享</span>
              <div
                v-show="shares"
                @click="onShare(dataClipboardText)"
                class="tipBg"
              >
                复制链接
              </div>
            </div>
          </div>
          <div class="mechanicsListDataBox">
            <div
              class="mechanicsListDataMoney"
              v-show="
                machineList.machine_quotedPrice != undefined
                  ? machineList.machine_quotedPrice.length >= 1
                  : ''
              "
            >
              <div class="titlePrice">价格：</div>
              <div
                class="styleListBox"
                v-for="(item, index) of machineList.machine_quotedPrice"
                :key="index"
              >
                <div class="styleBg">¥{{ item.price }}</div>
                <div class="styleBg1">{{ item.unit }}</div>
              </div>
            </div>
            <div
              class="mechanicsListDataMoney"
              v-if="
                machineList.machine_quotedPrice != undefined
                  ? machineList.machine_quotedPrice.length <= 0
                  : ''
              "
            >
              <div class="titlePrice">价格：</div>
              <div class="discussion">面议</div>
            </div>
            <div class="mechanicsListDataMoney1">
              <div class="titlePrice">设备品牌：</div>
              <div class="titlePrice1">
                {{ machineList.brands ? machineList.brands : "未知" }}
              </div>
            </div>
            <div class="mechanicsListDataMoney2">
              <div class="titlePrice">设备型号：</div>
              <div class="titlePrice1">
                {{ machineList.model ? machineList.model : "未知" }}
              </div>
            </div>
          </div>
          <div class="addressBox" v-if="machineList.machine_address">
            <img
              src="./../../../../../public/img/mechanics/addressIconInfo.png"
              class="addressIconInfo"
            />
            <div class="titlePrice2">{{ machineList.machine_address }}</div>
          </div>
          <div class="goConsulting" @click="onPhone" ref="treeBtn">
            <div class="goConsultingName">立即咨询</div>
            <img
              src="./../../../../../public/img/rent/rightIcon.png"
              class="otherRightIcon"
            />
            <div class="isPhone" v-if="isShow">请拨打：4008-188-191</div>
          </div>
        </div>
      </div>
      <!-- 机械详情 -->
      <div class="titleInfoName">
        <div class="InfoName">机械详情</div>
      </div>
      <div class="mechanicsInfo">
        <div class="listBoxWarp">
          <div class="warpBox">
            <div class="columnBox">
              <div class="columnTitleName">排放标准</div>
              <div class="columnTitleName">机械类型</div>
              <div class="columnTitleName">其他</div>
            </div>
            <div class="columnBox1">
              <div class="columnTitleInfo">
                {{
                  machineList.machine_standard
                    ? machineList.machine_standard
                    : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{ machineList.type ? machineList.type : "未知" }}
              </div>
              <div class="columnTitleInfo">
                {{
                  machineList.machine_other_support
                    ? machineList.machine_other_support
                    : "未知"
                }}
              </div>
            </div>
          </div>
          <div class="warpBox">
            <div class="columnBox">
              <div class="columnTitleName">表显小时数</div>
              <div class="columnTitleName">品牌及型号</div>
              <div class="columnTitleName">影响报价因素</div>
            </div>
            <div class="columnBox1">
              <div class="columnTitleInfo">
                {{
                  machineList.machine_power ? machineList.machine_power : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{ machineList.brand_model ? machineList.brand_model : "未知" }}
              </div>
              <div class="columnTitleInfo">
                {{
                  machineList.affect_quotation
                    ? machineList.affect_quotation
                    : "未知"
                }}
              </div>
            </div>
          </div>
          <div class="warpBox1">
            <div class="columnBox">
              <div class="columnTitleName">车辆出厂日期</div>
              <div class="columnTitleName">机械位置</div>
              <div class="columnTitleName">设备ID</div>
            </div>
            <div class="columnBox1">
              <div class="columnTitleInfo">
                {{
                  machineList.machine_production_date
                    ? machineList.machine_production_date
                    : "未知"
                }}
              </div>
              <div class="columnTitleInfoa">
                {{
                  machineList.machine_address
                    ? machineList.machine_address
                    : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{ machineList.machine_num ? machineList.machine_num : "未知" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="enterpriseTitle">
        欢迎来电咨询轰隆隆，我们将为您提供更详细的设备信息，感谢您对轰隆隆的关注与支持！
      </div>
      <div class="imagesBox">
        <div v-if="machineList.jxzj">
          <div class="imagesTitleName">设备整机照片</div>
          <img :src="machineList.jxzj" class="jxzjImg" />
        </div>
        <div
          v-if="
            machineList.jxjblist != undefined
              ? machineList.jxjblist.length >= 1
              : ''
          "
        >
          <div class="imagesTitleName1">设备局部照片</div>
          <div v-for="(image, images) of machineList.jxjblist" :key="images">
            <img :src="image" class="jxzjImg" />
          </div>
        </div>
      </div>
      <!-- 热门机械 -->
      <div class="titleIconNameBox">
        <img
          src="./../../../../../public/img/mechanics/titleIconName.png"
          class="titleIconName"
        />
      </div>
      <div class="mechanicsListBox">
        <div
          class="mechanicsItem"
          v-for="(
            itemMechanicsListBox, mechanicsListBoxIndex
          ) of mechanicsListBox"
          :key="mechanicsListBoxIndex"
          @click="machineItem(itemMechanicsListBox.machine_id)"
        >
        <!-- <a href="http://"></a> -->
         <!-- <a :href="'https://www.honglonglong.net/static/machine/'+itemMechanicsListBox.machine_id+'.html'" target="_blank" rel="noopener noreferrer"></a> -->
          <router-link
            :to="{
              path: '/MechanicsItemInfo',
              query: {
                machineId: itemMechanicsListBox.machine_id,
                currentIndex: 2,
              },
            }"
            @click.native="flushCom"
          >
            <div class="itemImg">
              <img
                :src="itemMechanicsListBox.jxzj_thumb"
                class="mechanicsImg"
              />
            </div>
            <div class="mechanicsItemInfo">
              <div class="titleMoneyWarp">
                <div>
                  <div class="itemStyleBg">
                    <div
                      class="itemStyleBgMoney"
                      v-if="
                        itemMechanicsListBox.unit_price != undefined
                          ? itemMechanicsListBox.unit_price.length > 1
                          : ''
                      "
                    >
                      ¥{{ itemMechanicsListBox.unit_price[0].price
                      }}{{ itemMechanicsListBox.unit_price[0].unit }}
                    </div>
                    <div
                      class="itemStyleBgOne"
                      v-if="
                        itemMechanicsListBox.unit_price != undefined
                          ? itemMechanicsListBox.unit_price.length == 1
                          : ''
                      "
                    >
                      ¥{{ itemMechanicsListBox.unit_price[0].price
                      }}{{ itemMechanicsListBox.unit_price[0].unit }}
                    </div>
                  </div>
                  <div
                    class="itemStyleBgOne"
                    v-if="!itemMechanicsListBox.unit_price"
                  >
                    面议
                  </div>
                </div>
                <div class="itemAddress">{{ itemMechanicsListBox.area }}</div>
              </div>
              <div class="itemTitleName">
                {{ itemMechanicsListBox.size_name }}
              </div>
              <div class="styleBorder">
                <div class="styleTitle">
                  <img
                    src="./../../../../../public/img/mechanics/styleBorderLeftIcon.png"
                    class="styleImg"
                  />
                  <div class="styleTitleName">
                    {{
                      itemMechanicsListBox.standard
                        ? itemMechanicsListBox.standard
                        : "未知"
                    }}
                  </div>
                </div>
                <div class="styleBottom">
                  <img
                    src="./../../../../../public/img/mechanics/styleBorderTime.png"
                    class="styleImg"
                  />
                  <div class="styleTitleName">
                    {{
                      itemMechanicsListBox.production_date
                        ? itemMechanicsListBox.production_date
                        : "未知"
                    }}
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import FooterBar from "../../../../components/FooterBar";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { getmachine, getHotlist } from "../../../../apis/api.js";
import { Message } from "element-ui";
import Clipboard from "clipboard"; //一键复制
export default {
  components: {
    NavBarHeader,
    FooterBar,
    Swiper,
    SwiperSlide,
  },
  data() {
    // 这里存放数据
    return {
      userInfo: {},
      dataClipboardText: window.location.href,
      swiperOptionTop: {
        centeredSlides: true,
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
        loop: false,
        slidesPerView: 1,
        autoplay: false,
      },
      swiperOptionTopKey: Math.random().toString(36).substr(2),
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: 5,
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
      swiperOptionThumbsKey: Math.random().toString(36).substr(2),
      machineList: {},
      mechanicsListBox: [],
      isShow: false,
      shares: false,
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    hidePanel(event) {
      var myPanel = document.getElementById("iconRightz"); // 得到点击出现的节点
      if (myPanel) {
        this.shares = true; // 有改节点的时候，显示，解决第二次点击openAddress按钮出现的bug
        if (!myPanel.contains(event.target)) {
          // 这句是说如果我们点击到了id为myPanel以外的区域，为false
          this.shares = false; // 消失
        }
      }
    },
    onShowz() {
      this.shares = !this.shares;
    },
    flushCom() {
      this.$router.go(1);
    },
    onShare() {
      var clipboard = new Clipboard(".shareIconBox");
      clipboard.on("success", (e) => {
        setTimeout(() => {
          this.shares = false;
          Message.success("已复制当前网址");
        }, 500);
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Message.error("浏览器不支持复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    onPhone() {
      if (this.userInfo) {
        this.isShow = !this.isShow;
      } else {
        this.$router.push({ path: "/loginPc" });
      }
    },
    // 详情数据
    async getmachine(idx) {
      let data = {
        machine_id: idx,
      };
      let res = await getmachine(data);
      if (res.data.result == "1") {
        this.machineList = res.data.body;
      }
    },
    async getHotlist() {
      let res = await getHotlist();
      if (res.data.result == "1") {
        this.mechanicsListBox = res.data.body.list;
      }
    },
    machineItem(idx) {
      this.getmachine(idx);
      this.getHotlist();
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getmachine(this.$route.query.machineId);
    this.getHotlist();
    this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.swiperOptionTop.thumbs = {
        swiper: this.$refs.swiperThumbs.$swiper,
        slideThumbActiveClass: "slide-thumb-active",
      };
      this.swiperOptionTopKey = Math.random().toString(36).substr(2); //重新初始化top-swiper
    });
    // 控制右侧弹窗点击任何地方可以关闭电话弹窗
    document.addEventListener("mouseup", (e) => {
      let tree = this.$refs.treeBtn;
      if (tree) {
        if (!tree.contains(e.target)) {
          this.isShow = false;
        }
      }
    });
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {
    // 如果点击下面热门机械跳转到顶部
    window.scroll(0, 0);
  }, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.headerContainer {
  margin: 0 auto;
  width: 1180px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.container {
  padding-bottom: 20px;
  padding-top: 20px;
  margin: 0 auto;
  width: 1180px;
  // height: 100vh;
  padding-bottom: 50px;
}
.titleBox {
  display: flex;
}
.leftImgBox {
  position: relative;
  width: 450px;
  height: 389px;
}
.leftImgBoximgWidth {
  width: 450px;
  height: 389px;
  object-fit: contain;
  position: relative;
}

.leftImgBoximg {
  width: 450px;
  // height: 389px;
  object-fit: contain;
}
.container .origin-img {
  // display: none !important;
  width: 450px !important;
  height: 389px !important;
  object-fit: contain;
}
// .  {
//   width: 200% !important;
//   height: 200% !important;
//   object-fit: cover !important;
// }
.leftImgBoximgTwo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rightBox {
  width: 709px;
  margin-left: 20px;
}
.rightTitleName {
  font-size: 22px;
  color: #333;
}
.mechanicsListDataBox {
  margin-top: 14px;
  border-top: 1px solid #ff855b;
  background: #fff8f5;
  height: 194px;
}
.mechanicsListDataMoney {
  display: flex;
  padding-top: 20px;
  margin-left: 20px;
  box-sizing: border-box;
}
.mechanicsListDataMoney1 {
  display: flex;
  align-items: center;
  padding-top: 16px;
  margin-left: 20px;
  box-sizing: border-box;
}
.mechanicsListDataMoney2 {
  display: flex;
  align-items: center;
  padding-top: 14px;
  margin-left: 20px;
  box-sizing: border-box;
}
.mechanicsListData {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.mechanicsType {
  font-size: 14px;
  color: #999;
}
.mechanicsBrand {
  font-size: 14px;
  color: #999;
}
.heightStyle {
  width: 1px;
  height: 10px;
  background-color: #999;
  margin: 0 20px;
}
.shareIconBox {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  .tipBg {
    position: absolute;
    bottom: -45px;
    left: -10px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    width: 78px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(213, 213, 213, 0.5);
    z-index: 100;
  }
}
.shareIcon {
  width: 15px;
  height: 15px;
}
.shareIconName {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
.search {
  width: 42px;
  height: 42px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.countData {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}
.offerBox {
  width: 709px;
  background-color: #f5f7fa;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
.itemstyleListBox {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.styleBg {
  padding: 0 10px;
  color: #ff7d59;
  font-size: 26px;
  text-align: center;
}
.discussion {
  color: #ff7d59;
  font-size: 24px;
}
.styleBg1 {
  font-size: 12px;
  color: #999;
}
.styleBg2 {
  padding: 0 10px;
  border: 1px solid #ff7d59;
  border-left: none;
  height: 24px;
  line-height: 24px;
  color: #333;
  font-size: 12px;
  text-align: center;
  background: #fff;
}
.styleBg3 {
  padding: 0 10px;
  border: 1px solid #ff7d59;
  border-left: none;
  height: 24px;
  line-height: 24px;
  color: #333;
  font-size: 12px;
  text-align: center;
  background: #fff;
}
.styleListBox {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.offerInfoBox {
  margin-left: 20px;
  margin-top: 18px;
}
.cardDate {
  font-size: 14px;
  color: #999;
  span {
    font-size: 14px;
    color: #333;
  }
}
.influence {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #333;
  }
}
.other {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #333;
  }
}
.otherInfo {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #333;
  }
}
.goConsulting {
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
  position: relative;
  cursor: pointer;
}
.goConsultingName {
  font-size: 16px;
  color: #fff;
}
.isPhone {
  width: 300px;
  height: 60px;
  line-height: 60px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0.5;
  position: absolute;
  left: 0;
  bottom: -80px;
  text-align: center;
  color: #fff;
  font-size: 24px;
}
.otherRightIcon {
  width: 27px;
  height: 11px;
  margin-left: 10px;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.4);
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 28px;
}
.mechanicsListBox {
  margin: 50px auto 0 auto;
  width: 1180px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}
.mechanicsItem {
  width: 275px;
  height: 370px;
  margin-bottom: 30px;
  margin-right: 15px;
  cursor: pointer;
}
.itemImg {
  width: 275px;
  height: 242px;
  overflow: hidden;
  position: relative;
}
.mechanicsImg:hover {
  width: 275px;
  height: 243px;
  transform: scale(1.1, 1.1); /*开始为原始大小*/
  -webkit-transform: scale3d(1.1, 1.1);
  transition: 0.8s transform;
  -webkit-transition: 0.8s transform;
}
.mechanicsImg {
  width: 275px;
  height: 243px;
  object-fit: cover;
  transform: scale(1, 1); /*开始为原始大小*/
  -webkit-transform: scale3d(1.1, 1.1);
  transition: 0.8s transform;
  -webkit-transition: 0.8s transform;
}
.mechanicsItemInfo {
  width: 273px;
  height: 129px;
  border: 1px solid #ebeef5;
}
.itemStyleBgMoney {
  font-size: 16px;
  color: #ff855b;
}
.itemStyleBgOne {
  color: #ff7d59;
  font-size: 16px;
}
.styleBgOne {
  padding: 0 30px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  height: 26px;
  line-height: 26px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}
.itemTitleName {
  font-size: 14px;
  height: 40px;
  color: #333;
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 10px;
  box-sizing: border-box;
}
.itemTitleInfo {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}
.itemAddress {
  font-size: 12px;
  color: #999;
}
.titleIconNameBox {
  margin-top: 64px;
  margin-bottom: 50px;
}
.titleIconName {
  width: 167px;
  height: 68px;
}
.rightBoxWarp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.titlePrice {
  font-size: 14px;
  color: #999;
  margin-top: 6px;
}
.titlePrice1 {
  font-size: 14px;
  color: #333;
  margin-top: 6px;
}
.titlePrice2 {
  font-size: 14px;
  color: #999;
}
.addressBox {
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.addressIconInfo {
  width: 18px;
  height: 21px;
  margin-right: 6px;
}
.mechanicsInfo {
  height: 194px;
  border: 1px solid #dcdfe6;
  border-top: none;
  box-sizing: border-box;
}
.titleInfoName {
  height: 34px;
  line-height: 34px;
  background: #fff8f5;
  margin-top: 50px;
  border-bottom: 1px solid #ff855b;
}
.InfoName {
  margin-left: 20px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.warpBox {
  display: flex;
  align-items: center;
}
.warpBox1 {
  display: flex;
  align-items: center;
  margin-right: 100px;
}
.listBoxWarp {
  width: 100%;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.columnBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 29px;
}
.columnBox1 {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  justify-content: center;
  margin-top: 29px;
}
.columnTitleName {
  height: 65px;
  font-size: 14px;
  color: #999;
}
.columnTitleInfo {
  height: 65px;
  font-size: 14px;
  color: #333;
}
.columnTitleInfoa {
  height: 65px;
  max-width: 350px;
  font-size: 14px;
  color: #333;
}
.enterpriseTitle {
  font-size: 14px;
  color: #333;
  margin-top: 20px;
}
.imagesBox {
  margin-top: 30px;
}
.imagesTitleName {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.imagesTitleName1 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 24px;
}
.jxzjImg {
  display: block;
  margin: 24px auto 0 auto;
  width: 838px;
  height: 602px;
  object-fit: cover;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  margin-top: 20px;
}
.gallery-thumbs .swiper-slide {
  height: 60px;
  width: 25%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide.slide-thumb-active {
  opacity: 1;
}
.titleMoneyWarp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 10px 0 10px;
}
.styleBorder {
  display: flex;
  align-items: center;
  // padding-top: 12px;
  padding-left: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}
.styleTitle {
  display: flex;
  align-items: center;
}
.styleBottom {
  display: flex;
  align-items: center;
  margin-left: 23px;
}
.styleTitleName {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}
.styleImg {
  width: 15px;
  height: 15px;
}
</style>
